<template>
  <div class="filters">
    <el-row
      type="flex"
      class="filters-top"
      justify="space-between"
      align="middle"
    >
      <el-col :span="8">
        单程： {{ `${$route.query.departCity} - ${$route.query.destCity} / ${$route.query.departDate}` }}
      </el-col>
      <el-col :span="4">
        <el-select
          v-model="airport"
          size="mini"
          placeholder="起飞机场"
          @change="filterData"
        >
          <el-option
            v-for="(item, index) in data.options.airport"
            :key="index"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select
          v-model="flightTimes"
          size="mini"
          placeholder="起飞时间"
          @change="filterData"
        >
          <el-option
            v-for="(item,index) of data.options.flightTimes"
            :key="index"
            :value="item.from + ',' + item.to"
            :label="`${item.from}:00-${item.to}:00`"
          />
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select
          v-model="airSize"
          size="mini"
          placeholder="机型"
          @change="filterData"
        >
          <el-option
            v-for="(item, index) in sizeOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select
          v-model="company"
          size="mini"
          placeholder="航空公司"
          @change="filterData"
        >
          <el-option
            v-for="(item, index) in data.options.company"
            :key="index"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-col>
    </el-row>
    <div class="filter-cancel">
      筛选：
      <el-button
        type="primary"
        round
        plain
        size="mini"
        @click="repeal"
      >
        撤销
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FlightsFilter',
  props: {
    data: {
      type: Object,
      default () {
        return {

        }
      }
    }
  },
  data () {
    return {
      airport: '', // 机场
      flightTimes: '', // 出发时间
      company: '', // 航空公司
      airSize: '', // 机型大小,
      sizeOptions: [
        {
          label: '大',
          value: 'L'
        },
        {
          label: '中',
          value: 'M'
        },
        {
          label: '小',
          value: 'S'
        }
      ]
    }
  },
  methods: {
    filterData () {
      let list = this.data.flights
      if (this.airport) {
        list = this.handleSelectAirport(list)
      }
      if (this.flightTimes) {
        list = this.handleSelectFlightTimes(list)
      }
      if (this.airSize) {
        list = this.handleSelectAirSize(list)
      }
      if (this.company) {
        list = this.handleSelectCompany(list)
      }
      this.$emit('handleSelect', list)
    },
    handleSelectAirport (list) {
      const res = list.filter((item) => {
        return item.org_airport_name === this.airport
      })
      return res
    },
    handleSelectFlightTimes (list) {
      const startTime = Number(this.flightTimes.split(',')[0])
      const endTime = Number(this.flightTimes.split(',')[1])
      const res = list.filter((flight) => {
        const depTime = Number(flight.dep_time.split(':')[0])
        return depTime >= startTime && depTime < endTime
      })
      return res
    },
    handleSelectAirSize (list) {
      const res = list.filter((flight) => {
        return flight.plane_size === this.airSize
      })
      return res
    },
    handleSelectCompany (list) {
      const res = list.filter((flight) => {
        return flight.airline_name === this.company
      })
      return res
    },
    // 撤销
    repeal () {
      this.airport = ''
      this.flightTimes = ''
      this.company = ''
      this.airSize = ''
      this.$emit('handleSelect', this.data.flights)
    }
  }
}
</script>

<style scoped lang="less">
.filters {
        margin-bottom: 20px;
    }

    .filters-top {
        > div {
            /deep/ .el-select {
                margin-left: 10px;
            }
        }
    }

    .filter-cancel {
        margin-top: 10px;
    }
</style>
